<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>数据大屏</title>
		<script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/jquery.js"></script>
		<script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/layui.all.js"></script>
		<!-- <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/layui.js"></script> -->
		<link rel="stylesheet" type="text/css" href="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/css/layui.css" />
		<script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/echarts.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=tQAk8cBCGKz24ekGp5Tk9Q8QUVlMA4VB"></script>
		<style>
			body{
			  font-family: "华文细黑";
			  background:url("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/backgroud.png") no-repeat;
			  background-size: 100%;
			}
		</style>

	</head>

	<body>
		<div class="layui-body">
			<div class="layui-fluid">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-body">老干部数据大屏</div>
						</div>
					</div>
					<!--left map start-->
					<div class="layui-col-md7">
						<div class="layui-row layui-col-space15">
							<div class="layui-col-md24">
								<div class="layui-card">
									<!-- <div class="layui-card-header">地图</div> -->
									<div >
										<div id="container" class="layui-carousel" style="width: 100%; height: 730px;"> </div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--left map end-->

					<!--right table start-->
					<div class="layui-col-md5">

						<!-- right huodong info start-->
						<div class="layui-card">
							<div class="layui-card-body">
								<div class="layui-form toolbar">
									<div class="layui-form-item">
										<div class="layui-inline">
											<select id="areaSelect"  name="areaSelect" lay-filter="areaSelectFilter">

											</select>
										</div>
										<div class="layui-inline">
											<select id="jdSelect"  name="jdSelect" lay-filter="jdSelectFilter">

											</select>
										</div>
										<div class="layui-inline" >
											<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-radius">搜索 </button>
										</div>
									</div>
								</div>
								<table  id="huodongTable" class="layui-table" lay-filter="huodongTable"></table>
							</div>
						</div>

						<!-- right huodong info end-->

						<div class="layui-card">
							<div class="layui-card-body">
								 <div id="chart1" style="height: 200px;"></div>
							</div>
						</div>


						<div class="layui-card">
							<div class="layui-card-body">
								<div class="layui-form toolbar">
									<div class="layui-form-item">
										<div class="layui-inline">
											<select id="areaSelect2"  name="areaSelect2" lay-filter="areaSelectFilter2">

											</select>
										</div>
										<div class="layui-inline">
											<select id="jdSelect2"  name="jdSelect2" lay-filter="jdSelectFilter2">

											</select>
										</div>
										<div class="layui-inline" >
											<button id="btnSearch2" class="layui-btn layui-btn-sm layui-btn-radius">搜索 </button>
										</div>
									</div>
								</div>
								<table  id="huodongTable2" class="layui-table" lay-filter="huodongTable2"></table>
							</div>
						</div>

					</div>
					<!--right table end-->

					<div>
						<div>
						</div>
						<!--基础函数开发-->
						<script>
							//表格
							layui.use(['table', 'form'], function() {
								var $ = layui.$;
								var hdtable = layui.table;
								var hdtable2 = layui.table;
								var form = layui.form;
								var form2 = layui.form;
								var HuoDong = {
									tableId: "huodongTable"
								};

								var HuoDong2 = {
								 	tableId: "huodongTable2"
								};

								//渲染表格
								var tableResult = hdtable.render({
									elem: '#' + HuoDong.tableId,
									url: 'http://localhost:8083/blade-app/huodong/getHuodongPageByAreaInfo',
									page: false,
									height: 300,
									cellMinWidth: 100,
									cols: [
										[{
												field: 'id',
												// hide: true,
												title: '主键'
											},
											{
												field: 'hdname',
												title: '活动名称',
												align: 'center'
											},
											{
												field: 'stime',
												title: '时间',
												align: 'center'
											},
											{
												field: 'areaname',
												title: '区域',
												align: 'center'
											},
											{
												field: 'manager',
												title: '发起人',
												align: 'center'
											},
										]
									]
								});
								//渲染表格
								var tableResult2 = hdtable2.render({
									elem: '#' + HuoDong2.tableId,
									url: 'http://localhost:8083/blade-system/dept/getDeptPageByAreaInfo',
									page: false,
									height: 300,
									cellMinWidth: 100,
									cols: [
										[{
												field: 'id',
												// hide: true,
												title: '主键'
											},
											{
												field: 'deptName',
												title: '服务队名称',
												align: 'center'
											},
											{
												field: 'temascount',
												title: '团队数量',
												align: 'center'
											},
											{
												field: 'areaname',
												title: '活动区域',
												align: 'center'
											},
										]
									]
								});
								HuoDong.search = function() {
									var queryData = {};
									queryData['areacode'] = $("#areaSelect").val();
									queryData['jdcode'] = $("#jdSelect").val();
									hdtable.reload(HuoDong.tableId, { where: queryData });
								};
								HuoDong2.search = function() {
									var queryData = {};
									queryData['areacode'] = $("#areaSelect2").val();
									queryData['jdcode'] = $("#jdSelect2").val();
									hdtable2.reload(HuoDong2.tableId, { where: queryData });
								};


								$(function() {
									$.ajax({
										url: "http://124.128.226.225:8083/blade-system/region/getAreaByJn",
										// data:{'id':id},
										type: "get",
										dataType: "json",
										success: function(res) {
											// alert(JSON.stringify(res));
											var result = res.data;
											var shtml = "<option value=''>请选择区域</option>";
											$.each(result, function(i, val) {
												shtml += '<option value="' + val.code + '">' + val.name + '</option>';
											});
											$("#areaSelect").html(shtml);
										    $("#areaSelect2").html(shtml);
											form.render('select');
										},
										error: function(data) {
											//$.messager.alert('错误', data.msg);
										}
									});
									HuoDong.search();
									HuoDong2.search();
									///

									$.ajax({
										url: "http://localhost:8083/blade-user/geUserAgeTypeByAreaInfo",
										type: "get",
										dataType: "json",
										success: function(res) {
											var visdata = res.data;
											 var option = {
											 	title: { text: '人员年龄统计' },
											 	series: [{ name: '访问量', type: 'pie', radius: '80%', data:  visdata, }]
											 };
											 var myChart = echarts.init(document.getElementById('chart1'));
											 myChart.setOption(option);
										},
										error: function(res) {
											////$.messager.alert('错误', res.msg);
										}
									});

								})

								//根据客户经理select  为"所属客户营销单元select"赋值
								form.on('select(areaSelectFilter)', function (data) {
									// alert(data.value);
									$.ajax({
										url: "http://124.128.226.225:8083/blade-system/region/getStreetByArea?code="+data.value,
										// data:{'id':id},
										type: "get",
										dataType: "json",
										success: function(res) {
											var result = res.data;
											var shtml = "<option value=''>请选择街道</option>";
											$.each(result, function(i, val) {
												shtml += '<option value="' + val.code + '">' + val.name + '</option>';
											});
											$("#jdSelect").html(shtml);
											form.render('select');
										},
										error: function(data) {
											//$.messager.alert('错误', data.msg);
										}
									});
								});
								form2.on('select(areaSelectFilter2)', function (data) {
									// alert(data.value);
									$.ajax({
										url: "http://124.128.226.225:8083/blade-system/region/getStreetByArea?code="+data.value,
										// data:{'id':id},
										type: "get",
										dataType: "json",
										success: function(res) {
											var result = res.data;
											var shtml = "<option value=''>请选择街道</option>";
											$.each(result, function(i, val) {
												shtml += '<option value="' + val.code + '">' + val.name + '</option>';
											});
											$("#jdSelect2").html(shtml);
											form.render('select');
										},
										error: function(data) {
											//$.messager.alert('错误', data.msg);
										}
									});
								});
								 // 搜索按钮点击事件
								 $('#btnSearch').click(function() {
								 	HuoDong.search();
								 });
								 $('#btnSearch2').click(function() {
								 	HuoDong2.search();
								 });

			 //init bd map container
						var map = new BMap.Map("container", { minZoom: 12 ,enableMapClick:false});
						var point = new BMap.Point(117.010213, 36.635747);
						//init bd map level
						map.centerAndZoom(point, 9);
						//set map isnot scroll.
						map.enableScrollWheelZoom(true);

			 /////////////////////////////////////添加坐标添加点事件和窗口//////////////////////////////
										var opts = {
											width: 260, // 信息窗口宽度
											height: 200, // 信息窗口高度
											title: "老年活动中心", // 信息窗口标题
											enableMessage: true, //设置允许信息窗发送短息
											message: "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
										}
										var sContent =
											"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
											"<a href='http://www.baidu.com'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</a>" +
											"</div>";
										var infoWindow = new BMap.InfoWindow(sContent, opts); // 创建信息窗口对象
										function addMarker(point) {
											var marker = new BMap.Marker(point);
											marker.addEventListener("click", function(e) {
												map.openInfoWindow(infoWindow, point); //开启信息窗口
											});
											map.addOverlay(marker);
										}
										var bounds = map.getBounds();
										var sw = bounds.getSouthWest();
										var ne = bounds.getNorthEast();
										var lngSpan = Math.abs(sw.lng - ne.lng);
										var latSpan = Math.abs(ne.lat - sw.lat);
										for (var i = 0; i < 10; i++) {
											var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
											addMarker(point);
										}


							});
						</script>



	</body>
</html>
